<footer class="footer-main">
  <div class="footer-sec-1">
    {%- if section.blocks.size == 0 -%}
      <div>
        <p>Guides</p>
        <p>Terms of Sale</p>
        <p>Terms of Use</p>
        <p>Privacy Policy</p>
        <p>Guides</p>
        <p>Terms of Sale</p>
      </div>
      <div>
        <p>Guides</p>
        <p>Terms of Sale</p>
        <p>Terms of Use</p>
        <p>Privacy Policy</p>
        <p>Guides</p>
        <p>Terms of Sale</p>
      </div>
      <div>
        <p>Guides</p>
        <p>Terms of Sale</p>
        <p>Terms of Use</p>
        <p>Privacy Policy</p>
        <p>Guides</p>
        <p>Terms of Sale</p>
      </div>

      <div>
        <p>Guides</p>
        <p>Terms of Sale</p>
        <p>Terms of Use</p>
        <p>Privacy Policy</p>
        <p>Guides</p>
        <p>Terms of Sale</p>
      </div>

    {% else %}
      {% comment %}
        <div>
          {% for block in section.blocks %}
            <li>
              <a href="{{ block.settings.link }}">{{ block.settings.text | escape }}</a>
            </li>
          {% endfor %}
        </div>
      {% endcomment %}
      {% for block in section.blocks %}
        <div>
          <li>
            <a href="{{ block.settings.link }}">{{ block.settings.text | escape }}</a>
          </li>
          <li>
            <a href="{{ block.settings.link }}">{{ block.settings.text | escape }}</a>
          </li>
          <li>
            <a href="{{ block.settings.link }}">{{ block.settings.text | escape }}</a>
          </li>
          <li>
            <a href="{{ block.settings.link }}">{{ block.settings.text | escape }}</a>
          </li>
        </div>
      {% endfor %}
    {% endif %}
  </div>
  <div class="footer-sec-2">
    <p>Guides</p>
    <p>Terms of Sale</p>
    <p>Terms of Use</p>
    <p>Privacy Policy</p>
  </div>
</footer>

<style>
  .footer-main {
    background: {{ section.settings.background }}
    ;
    color: {{ section.settings.text_color }}
    ;
    padding: 10px;
  }
  .footer-sec-1 {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
  }

  .footer-sec-2 {
    display: flex;
  }
  .footer-sec-2 p {
    padding: 10px
  }
</style>

{% schema %}
{
  "name": "Footer",
  "settings": [
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#F4F4F4"
    }
  ],
  "blocks": [
    {
      "name": "Links",
      "type": "links",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "link"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "footer"
    }
  ]
}
{% endschema %}
